import React from 'react'
import { StackNavigator, TabBarBottom, TabNavigator } from 'react-navigation'
import { Icon } from './components'
import {
  CartScreen,
  ChatScreen,
  ChatsScreen,
  ContactsScreen,
  ControlScreen,
  EventScreen,
  EventsScreen,
  HomeScreen,
  ItemScreen,
  ItemsScreen,
  LoginScreen,
  OrderScreen,
  OrdersScreen,
  ProfileScreen,
  RegisterScreen,
  SettingsScreen,
} from './screens'

const createTabBarIcon = name => ({ focused, tintColor }) => (
  <Icon name={name} color={tintColor} outline={!focused} />
)

const createStackNavigatorConfig = ({ icon }) => ({
  headerMode: 'float',
  navigationOptions: {
    gesturesEnabled: true,
    tabBarIcon: createTabBarIcon(icon),
  },
})

const createTabNavigatorConfig = () => ({
  swipeEnabled: false,
  animationEnabled: false,
  tabBarPosition: 'bottom',
  tabBarComponent: TabBarBottom,
  tabBarOptions: { showLabel: false },
})

const HomeStack = StackNavigator(
  {
    Home: { screen: HomeScreen },
    Items: { screen: ItemsScreen },
    Item: { screen: ItemScreen },
  },
  createStackNavigatorConfig({ icon: 'compass' }),
)

const OrdersStack = StackNavigator(
  {
    Orders: { screen: OrdersScreen },
    Order: { screen: OrderScreen },
  },
  createStackNavigatorConfig({ icon: 'card' }),
)

const CartStack = StackNavigator(
  {
    Cart: { screen: CartScreen },
  },
  createStackNavigatorConfig({ icon: 'cart' }),
)

const ChatsStack = StackNavigator(
  {
    Chats: { screen: ChatsScreen },
    Chat: { screen: ChatScreen },
    Contacts: { screen: ContactsScreen },
  },
  createStackNavigatorConfig({ icon: 'text' }),
)

const EventsStack = StackNavigator(
  {
    Events: { screen: EventsScreen },
    Event: { screen: EventScreen },
  },
  createStackNavigatorConfig({ icon: 'ionic' }),
)

const ControlStack = StackNavigator(
  {
    Control: { screen: ControlScreen },
    Profile: { screen: ProfileScreen },
    Settings: { screen: SettingsScreen },
  },
  createStackNavigatorConfig({ icon: 'person' }),
)

const MainTabs = TabNavigator(
  {
    HomeTab: { screen: HomeStack },
    OrdersTab: { screen: OrdersStack },
    CartTab: { screen: CartStack },
    // ChatsTab: { screen: ChatsStack },
    // EventsTab: { screen: EventsStack },
    ControlTab: { screen: ControlStack },
  },
  createTabNavigatorConfig(),
)

export default StackNavigator(
  {
    Login: LoginScreen,
    Register: RegisterScreen,
    Main: MainTabs,
  },
  { headerMode: 'none' },
)
